<template>
	<view>
		<view
			:style="{ 'width':width==='100%'?'100%':width+'rpx','border-radius':`${radius}rpx`,'border-bottom':`${height}rpx ${mode} ${bgColor}`,'margin-top':`${top}rpx`,'margin-bottom':`${bottom}rpx`}">
		</view>
	</view>
</template>

<script>
	export default {
		name: "dev-split-line",
		props: {
			//线条类型
			mode: {
				type: String,
				default: 'solid' //dotted dashed
			},
			//圆角
			radius: {
				type: [String, Number],
				default: 0
			},
			//线条颜色
			bgColor: {
				type: String,
				default: '#E2E1E2'
			},
			//分割线宽度
			width: {
				type: [String, Number],
				default: '100%'
			},
			//分割线高度
			height: {
				type: [String, Number],
				default: 1
			},
			//距离顶部距离
			top: {
				type: [String, Number],
				default: 0
			},
			bottom: {
				type: [String, Number],
				default: 0
			}

		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.loi {
		border-bottom: 1rpx double #000;
	}
</style>
